﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>6.设置固定高度c</title>
    <script>
        //为了让布局更适用一些，可以在div-1元素上设置固定高度
    </script>
    <style>
            #example {
				float: right;
			}
 
			#example p {
				margin: 0 0.25em;
				padding: 0.25em 0;
			}
			#div-before,
			#div-after {
				background-color: #88d;
				color: #000;
			}
 
			#div-1 {
				width: 400px;
				background-color: #000;
				color: #fff;
			}
 
			#div-1-padding {
				padding: 10px;
			}
 
			#div-1a {
				background-color: #d33;
				color: #fff;
			}
 
			#div-1b {
				background-color: #3d3;
				color: #fff;
			}
 
			#div-1c {
				background-color: #33d;
				color: #fff;
			}

            #div-1 {
			    position:relative;
			    height:250px;
			}
			#div-1a {
			    position:absolute;
			    top:0;
			    right:0;
			    width:200px;
			}
			#div-1b {
			    position:absolute;
			    top:0;
			    left:0;
			    width:200px;
			}

    </style>
</head>
<body>
    <div id="example">
        <div id="div-before">
            <p>id = div-before</p>
        </div>
        <div id="div-1">
            <div id="div-1-padding">
                <p>id = div-1</p>
                <div id="div-1a">
                    <p>id = div-1a</p>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
                </div>
                <div id="div-1b">
                    <p>id = div-1b</p>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
                </div>
                <div id="div-1c">
                    <p>id = div-1c</p>
                </div>
            </div>
        </div>
        <div id="div-after">
            <p>id = div-after</p>
        </div>
    </div>
</body>
</html>